<template>
  <div class="loan-nsm">
    <div class="rowone">
      <el-row type="flex" class="row-bg" :gutter="24">
        <el-col :span="5">
          <el-input
            placeholder="搜索借款名称"
            suffix-icon="el-icon-search"
            v-model="requirement.name"
            class="inputLeft"
          >
          </el-input>
        </el-col>
        <el-col :span="5">
          <el-input
            placeholder="搜索借款方"
            suffix-icon="el-icon-search"
            v-model="requirement.userName"
            class="inputLeft"
          >
          </el-input>
        </el-col>
        <el-col :span="5">
          <el-input
            placeholder="搜索借款人手机号"
            suffix-icon="el-icon-search"
            v-model="requirement.userPhone"
            class="inputLeft"
          >
          </el-input>
        </el-col>
        <el-col :span="5">
          <el-select
            v-model="requirement.status"
            clearable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" @click="onClickSearch"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </div>
    <TableComponent
      :cols="cols"
      :table-data="tableData"
      :total="total"
      @requestData="requestData"
    >
      <template slot="operating" slot-scope="scope">
        <el-popover placement="top" trigger="hover">
          <el-button size="medium" @click="onClickEdit(scope)" type="primary"
            >编辑</el-button
          >
          <el-button size="medium" @click="onClickDestroy(scope)" type="danger"
            >作废</el-button
          >
          <span class="more" slot="reference">...</span>
        </el-popover>
      </template>
    </TableComponent>
  </div>
</template>

<script>
import TableComponent from "../../components/basic/TableComponent";

import { getLoanFrom } from "../../http/loan";

export default {
  name: "LoanNSM",
  components: {
    TableComponent,
  },
  data() {
    return {
      cols: {
        id: "编号",
        name: "标号",
        userName: "借款方",
        userPhone: "借款人手机",
        guaranteeAgency: {
          addr: ["guarantee"],
          title: "担保机构",
        },
        loanType: "借款类型",
        total: "借款金额",
        apr: "年化利率(%)",
        repayment: "还款方式",
        loanPeriod: "还款期限(天)",
        gmtCreated: {
          addr: ["borrowSubjectInfo"],
          title: "添加时间",
        },
        status: "状态",
      },
      requirement: {
        name: "", //新标名称
        userName: "", //借款方名称
        userPhone: "", //借款方手机
        status: "全部状态", //新标状态
        loanType: "", //借款类型
      },
      tableData: [],
      total: 0,
      page: 1,
      limit: 5,
      options: [
        {
          value: "全部状态",
        },
        {
          value: "新标待审核",
        },
        {
          value: "新增草稿",
        },
        {
          value: "初审不通过",
        },
      ],
    };
  },
  methods: {
    requestData(page, limit, requirement) {
      this.page = page;
      this.limit = limit;
      getLoanFrom(page, limit, requirement)
        .then((res) => {
          if (res.data.code == 20000) {
            this.total = res.data.data.total;
            this.tableData = res.data.data.rows;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          console.err(err);
          this.$message.error("数据加载失败！详情见日志");
        });
    },
    onClickSearch() {
      this.requestData(1, 5, this.requirement);
    },
    onClickEdit(scope) {
      this.$router.push(`/loan/loannsm/loannew/${scope.data.data.id}`);
    },
    onClickDestroy(scope) {
      console.log(scope.data);
    },
  },
  beforeMount() {
    this.requestData(1, 5);
  },
};
</script>

<style scoped>
.more {
  border: 1px solid #ebeef5;
  border-radius: 3px;
  padding: 0 10px;
}
.row-bg {
  padding: 20px 12px;
}
</style>